<template>
	<div class="item">
		<div v-if="type === 'a'">
			<h3>{{ title }}</h3>
			<img :src="urls[0]" alt="" class="big-img">
			<p>
				<span>{{ auth }}</span>
				<span>{{ count }}次播放</span>
				<span>{{ createTime }}</span>
			</p>
		</div>
		<div v-else-if="type === 'b'">
			<dl class="b">
				<dd>
					<h3>{{ title }}</h3>
					<p>
						<span>{{ auth }}</span>
						<span>{{ count }}次播放</span>
						<span>{{ createTime }}</span>
					</p>
				</dd>
				<dt>
					<img :src="urls[0]" alt="" class="right-img" />
				</dt>
			</dl>
		</div>
		<div v-else-if="type === 'c'">
			<h3>{{ title }}</h3>
			<p>
				<span>{{ auth }}</span>
				<span>{{ count }}次播放</span>
				<span>{{ createTime }}</span>
			</p>
		</div>
		<div v-else>
			<h3>{{ title }}</h3>
			<div class="three">
				<img :src="urls[0]" alt="">
				<img :src="urls[1]" alt="">
				<img :src="urls[2]" alt="">
			</div>
			<p>
				<span>{{ auth }}</span>
				<span>{{ count }}次播放</span>
				<span>{{ createTime }}</span>
			</p>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { defineProps } from 'vue'

defineProps<{
	type: 'a' | 'b' | 'c' | 'd',
	title: string
	urls: string[]
	auth: string
	count: number
	createTime: string
}>()
</script>
<style lang="scss" scoped>
.item {
	padding: 20px;
	border-bottom: 1px solid #ccc;

	.big-img {
		width: 100%;
	}

	p {
		span {
			margin: 0 4px;
		}
	}

	.b {
		display: flex;

		dt {
			width: 120px;
			flex-shrink: 0;

			img {
				width: 100%;
			}
		}

		dd {
			flex: 1;
		}
	}

	.three {
		display: flex;
		justify-content: space-around;

		img {
			width: 33%;
		}
	}
}
</style>